<script>
import { ref } from 'vue';
export default {
  props: {
    id: {
        type: Number,
        require: true
    },
    name: {
        type: String,
        require: true
    }
  },
  setup(ps, context) {
    console.log( 'this :', this );
    console.log( 'props :', ps );
    console.log( 'context :', context );
    console.log( 'attrs :', context.attrs );
    console.log( 'slots :', context.slots );
    console.log( 'emit :', context.emit );
    console.log( 'expose :', context.expose );

    const counter = ref(0);

    function increase() {
      console.log('increase');
      counter.value++;
    }

    // 声明当组件实例被父组件通过模板引用访问时暴露的公共属性
    // 相当于 `选项式API` 中的 expose 选项的作用
    context.expose({
      increase
    });

    // 通过setup函数的返回值向`模板`和其它`选项式API钩子`暴露数据
    return {
      counter
    }
  }
}
</script>

<template>
  <div>
    id: {{id}}, 
    name: {{name}}

    <p>
      <button @click="increase">已点击{{counter}}次</button>
    </p>
  </div>
</template>